<template>
  <div class="content">
    <div class="menu">
      <el-row :gutter="30">
        <el-col :span="6" :offset="0">
          <el-input v-model="news_search_text" placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search_news_data_by_name"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button
            v-if="current_user_level != 2 "
            type="primary"
            icon="el-icon-plus"
            @click="open_save_view('add',null)"
          >添加</el-button>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button
            v-if="news_is_search"
            icon="el-icon-arrow-left"
            @click="() => {
              news_is_search = false
              get_news_data_all()
            }"
          >返回</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="table">
      <el-table :data="news_data" style="width: 100%" max-height="650px" stripe>
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="author" label="发布人" width="80"></el-table-column>
        <el-table-column prop="clicks" label="点击量" width="80"></el-table-column>
        <el-table-column prop="categoryid" label="活动类型" width="180">
          <template slot-scope="scope">{{ category_data[scope.row.categoryid].name}}</template>
        </el-table-column>
        <el-table-column prop="state" label="审核是否通过" width="180">
          <template slot-scope="scope">
            <el-switch
              :value="scope.row.state == 1"
              disabled
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-text="scope.row.state == 3 ? '已被驳回': scope.row.state == 0 ? '未审核' : '已发布'"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="keyword" label="关键字" width="180"></el-table-column>
        <el-table-column prop="time" label="发布时间" width="180">
          <template slot-scope="scope">{{rTime(scope.row.time)}}</template>
        </el-table-column>
        <el-table-column prop="startdate" label="活动开始时间" width="180">
          <template slot-scope="scope">{{rTime(scope.row.startdate)}}</template>
        </el-table-column>
        <el-table-column prop="enddate" label="活动结束时间" width="180">
          <template slot-scope="scope">{{rTime(scope.row.enddate)}}</template>
        </el-table-column>

        <el-table-column prop="partner" label="合作方" width="180"></el-table-column>

        <el-table-column label="操作" fixed="right" width="300">
          <template slot-scope="scope">
            <el-button
              v-if="current_user_level == 2 "
              :disabled="scope.row.state == 1"
              size="mini"
              type="primary"
              @click="examine_data(scope.row.id)"
            >{{scope.row.state == 1 ? '已通过' : '审核'}}</el-button>
            <el-button
              v-if="current_user_level == 2 "
              size="mini"
              type="danger"
              @click="reject_data(scope.row.id)"
              :disabled="scope.row.state == 3"
            >驳回</el-button>
            <el-button
              size="mini"
              @click="open_save_view('update',scope.row)"
            >{{current_user_level == 2 ? '预览' : '编辑'}}</el-button>
            <el-button size="mini" @click="open_upload_resource_view(scope.row)">资源</el-button>
            <el-button
              v-if="current_user_level != 2 "
              size="mini"
              type="danger"
              @click="delete_data(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="save_view">
        <el-dialog
          :title="current_user_level == 2 ? '预览' : current_form_data.id == null ? '添加活动' : '编辑活动'"
          :visible.sync="save_view_display"
          :close-on-click-modal="false"
          width="80vh"
          top="1vh"
        >
          <el-form
            :model="current_form_data"
            :rules="rules"
            top="1vh"
            :disabled="current_user_level == 2"
          >
            <el-form-item label="编号">
              <el-input disabled v-model="current_form_data.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="current_form_data.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="选择部门">
              <el-select
                v-if="current_user_level == 1"
                v-model="current_form_data.departmentid"
                placeholder="请选择部门"
              >
                <el-option
                  v-for="item in department_data"
                  :key="item.id"
                  :label="item.dname"
                  :value="item.id"
                ></el-option>
              </el-select>
              <span v-else>{{department_data_list[current_user_deptId]}}</span>
            </el-form-item>
            <el-form-item label="活动开始时间" prop="startAndEndDate">
              <el-date-picker
                v-model="current_form_data.startAndEndDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="活动类型" prop="categoryid">
              <el-select v-model="current_form_data.categoryid" placeholder="请选择活动区域">
                <el-option
                  v-for="item in category_data"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-input v-model="current_form_data_activeday_text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="*星期限制   (该项为必需限制)" >
              <br />
              <el-checkbox-group v-model="current_form_data_activeday_week">
                <el-checkbox-button label="1">星期日</el-checkbox-button>
                <el-checkbox-button label="2">星期一</el-checkbox-button>
                <el-checkbox-button label="3">星期二</el-checkbox-button>
                <el-checkbox-button label="4">星期三</el-checkbox-button>
                <el-checkbox-button label="5">星期四</el-checkbox-button>
                <el-checkbox-button label="6">星期五</el-checkbox-button>
                <el-checkbox-button label="7">星期六</el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="合作方" prop="partner">
              <el-input v-model="current_form_data.partner" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="current_form_data.keyword" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="内容" prop="content">
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="current_form_data.content"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="save_view_display = false">取 消</el-button>
            <el-button type="primary" @click="save_data">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="upload_resource_view">
        <el-dialog
          title="活动资源管理"
          :width="current_user_level != 2 ? '60%' : '20%'"
          :visible.sync="upload_resource_view_display"
          :close-on-click-modal="false"
        >
          <el-row :gutter="20">
            <el-col v-if="current_user_level != 2 " :span="12" :offset="0">
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  drag
                  action="/api/upload/addparent"
                  multiple
                  name="file"
                  :on-success="handler_upload_success"
                  :data="{
                    id:current_news_resource.newsId
                  }"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                  </div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="current_user_level != 2 ? 12 : 20" :offset="0">
              <el-table :data="current_news_resource_data" style="width: 100%;margin-top:0px;">
                <el-table-column prop="id" label="文件编号" width="100"></el-table-column>
                <el-table-column label="操作" width="180">
                  <template slot-scope="scope">
                    <el-popover placement="bottom" title="预览视图" width="400" trigger="click">
                      <div class="resouce_display_view">
                        <img
                          v-if="scope.row.type == 'i'"
                          :src="'/api/upload/addparent/' + scope.row.id"
                          style="height:100%;width:100%"
                        />

                        <video
                          v-else
                          :src="'/api/upload/addparent/' + scope.row.id"
                          controls="controls"
                          style="height:100%;width:100%"
                        ></video>
                      </div>
                      <el-button slot="reference" size="mini">预览</el-button>
                    </el-popover>

                    <el-button
                      v-if="current_user_level != 2 "
                      size="mini"
                      type="danger"
                      @click="del_resouce(scope.row.id)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { departmentSelectAll, newsReject, uploadDeleteById, uploadSelectByNewsId, categorySelectAll, newsSelectAll, newsSave, newsSearchByName, newsDelete, newsExamine } from '@/api/requests/base'
import { rTime } from '@/utils/time'
import { getUserLevel, getDeptId } from '@/utils/user'
export default {
  name: 'news-manage',
  data () {
    return {
      rTime,
      current_user_level: getUserLevel(),
      current_user_deptId: getDeptId(),
      news_data: [],
      department_data: [],
      department_data_list: [],
      news_search_text: '',
      news_is_search: false,
      category_data: {},
      save_view_display: false,
      current_form_data: {},
      current_form_data_activeday_text: '',
      current_form_data_activeday_week: [],
      rules: {},
      upload_resource_view_display: false,
      current_news_resource: {
      },
      current_news_resource_data: [],
    }
  },
  created () {
    this.get_category_data_all()
    this.get_department_data()

  },

  methods: {
    get_news_data_all () {
      newsSelectAll().then(res => {
        this.news_data = res.data
        // 批量为表单属性添加校验
        if (this.news_data.length > 0) {
          let temp = this.news_data[0]
          for (let key in temp) {
            this.rules[key] = [{ required: true, message: '此项是必选项', trigger: 'blur' }]
          }
        }

      })
    },
    search_news_data_by_name () {
      newsSearchByName(this.news_search_text).then(res => {
        this.news_data = res.data
        this.news_is_search = true
      })

    },
    get_category_data_all () {
      categorySelectAll().then(res => {
        console.log(res);
        let data = res.data
        data.forEach(item => {
          this.category_data[item.id] = item
        });
        this.get_news_data_all()


      })
    },
    get_department_data () {
      departmentSelectAll().then(res => {
        this.department_data = res.data
        this.department_data.forEach(item => {
          this.department_data_list[item.id] = item.dname
        })
      })
    },
    open_save_view (type, data) {
      if (type == 'add') {
        this.current_form_data = {}
      } else if (type == 'update') {
        this.current_form_data = data
        const temp = JSON.parse(this.current_form_data.activeday)
        this.current_form_data_activeday_week = temp.week
        this.current_form_data_activeday_text = temp.text
        this.current_form_data.startAndEndDate = [
          data.startdate,
          data.enddate
        ]
      }

      this.save_view_display = true

    },
    open_upload_resource_view (news) {
      this.upload_resource_view_display = true
      this.current_news_resource.newsId = news.id
      this.get_resource_data(news.id)
    },
    examine_data (id) {
      newsExamine(id).then(res => {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success'
        });
        this.get_news_data_all()

      })

    },
    reject_data (id) {
      newsReject(id).then(res => {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success'
        });
        this.get_news_data_all()

      })

    },
    save_data () {
      if (this.current_user_level == 2) {
        this.save_view_display = false
        return
      }
      if (this.current_user_level != 1) {
        this.current_form_data.departmentid = this.current_user_deptId
      }
      const startAndEndDate = this.current_form_data.startAndEndDate
      this.current_form_data.startdate = startAndEndDate[0]
      this.current_form_data.enddate = startAndEndDate[1]
      this.current_form_data.activeday = JSON.stringify({
        'text': this.current_form_data_activeday_text,
        'week': this.current_form_data_activeday_week
      })
      let tempData = JSON.parse(JSON.stringify(this.current_form_data))
      delete tempData.weekCondition
      delete tempData.startAndEndDate

      newsSave(tempData).then(res => {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success'
        });

        this.save_view_display = false
        this.get_news_data_all()

      })


    },
    delete_data (id) {
      newsDelete(id).then(res => {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success'
        });
      })
    },
    get_resource_data () {
      uploadSelectByNewsId(this.current_news_resource.newsId).then(res => {
        this.current_news_resource_data = res.data
        console.log(res.data);
      })
    },
    del_resouce (id) {
      uploadDeleteById(id).then(res => {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success'
        });
        this.get_resource_data(id)
      })
    },
    handler_upload_success () {
      setTimeout(() => {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success'
        });
        this.get_resource_data()
      }, 1000);
    }
  },
}
</script>


<style lang="scss" scoped>

.content {
  padding: 40px;
  .el-dialog {
    overflow: auto;
  }
  .el-table {
    margin-top: 30px;
  }
}
</style>
